<template>
  <div>
    <el-card>
      <!-- <div class="input-box">
        <single-address
          ref="singleAddressSearch"
          style="margin-right: 20px"
        ></single-address>
      </div> -->
      <div class="input-box">
        <el-cascader
          ref="cascader"
          :options="options"
          :props="props"
          @change="change"
          placeholder="请选择人员"
          clearable
          style="margin-right: 20px"
        ></el-cascader>
        <el-select
          v-model="userValue"
          filterable
          remote
          reserve-keyword
          placeholder="请输入手机号查询"
          :remote-method="remoteMethod"
          :loading="loading"
          @change="userListChange"
          style="margin-right: 20px"
        >
          <el-option
            v-for="(item, index) in userOptions"
            :key="item.id"
            :label="item.name"
            :value="index"
          >
          </el-option>
        </el-select>
        <a href="/static/正德用户导入模板.xlsx" target="_blank">
          <el-button class="download" size="small" style="margin-right: 20px"
            >下载模板</el-button
          >
        </a>
        <file-upload></file-upload>
        <el-tag style="margin-left: 10px"
          >如没有查询到相关人员，请先导入后再进行配置</el-tag
        >
      </div>

      <div class="table-container">
        <el-table
          :data="list"
          size="mini"
          style="width: 100%"
          v-loading="listLoading"
          border
        >
          <el-table-column label="姓名" align="center">
            <template slot-scope="scope">{{ scope.row.name }}</template>
          </el-table-column>
          <el-table-column label="手机号" align="center">
            <template slot-scope="scope">{{ scope.row.phone }}</template>
          </el-table-column>
          <el-table-column label="社区" align="center">
            <template slot-scope="scope">{{
              scope.row.communityName
            }}</template>
          </el-table-column>
          <el-table-column label="身份" align="center">
            <template slot-scope="scope">{{
              userIdentityList[scope.row.userIdentity]
            }}</template>
          </el-table-column>
          <el-table-column label="操作" width="120" align="center">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="handleDelete(scope.$index)"
                >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
    <!-- <el-cascader :props="props"></el-cascader> -->
  </div>
</template>

<script>
import { fetchMemberList, findCommunity, findGroups, findMembers } from '@/api/login'
import SingleAddress from '@/components/SingleAddress'
import FileUpload from '@/components/Upload/fileUpload'

export default {
  name: 'UserList',
  props: {
    isActive: {
      type: Boolean,
      default: false
    }
  },
  components: { SingleAddress, FileUpload },
  data () {
    return {
      listLoading: false,
      loading: false,
      props: {
        multiple: true,
        lazy: true,
        lazyLoad (node, resolve) {
          console.log(node)
          const { level, value, parent } = node
          if (level > 2) {
            node.loading = false
            return
          }
          const type = level - 1
          const api = [findGroups, findMembers]
          const query = {
            pageNum: 1,
            pageSize: 100
          }
          if (type === 0) {
            query.communityId = value
          }
          if (type === 1) {
            query.communityId = parent.value
            query.groupCode = value
          }

          const name = ['groupName', 'name']
          const id = ['groupId', 'memberId']

          api[type](query).then((res) => {
            const nodes = res.data.list
              .map(item => {
                const params = {
                  value: item[id[type]],
                  label: item[name[type]],
                  leaf: level >= 2
                }

                if (level >= 2) {
                  const { username, memberId, name, phone, communityId, communityName, userIdentity } = item
                  params.userInfo = {
                    username,
                    memberId,
                    name,
                    phone,
                    communityId,
                    communityName,
                    userIdentity
                  }
                }
                return params
              })
            // 通过调用resolve将子节点数据返回，通知组件数据加载完成
            resolve(nodes)
          })
        }
      },
      options: [{ value: '', label: '' }],
      list: [],
      userIdentityList: { '01': '居民', '02': '居委会', '03': '物业公司', '04': '业委会', '05': '物管会', '06': '管理员', '07': '供应商', '08': '政府组织', '09': '其他' },
      userOptions: [],
      userValue: []
    }
  },
  mounted () {
    // this.$nextTick(() => {
    //   this.$refs.singleAddressSearch.init()
    // })
    findCommunity({
      pageNum: 1,
      pageSize: 100,
      countyCode: ''
    }).then((res) => {
      this.loading = false
      this.options = res.data.list.map(item => {
        return { value: item.id, label: item.communityName }
      })
    })
  },
  methods: {
    remoteMethod (query) {
      if (query !== '') {
        this.loading = true
        fetchMemberList({
          pageNum: 1,
          pageSize: 10,
          username: query,
          phone: ''
        }).then((res) => {
          this.loading = false
          this.userOptions = res.data.list.filter(item => {
            return item.username.indexOf(query) > -1
          }).map(item => {
            return { username: item.username, phone: item.username, name: item.name, memberId: item.id, communityId: item.communityId, communityName: item.communityName, userIdentity: item.userIdentity }
          })
        })
      } else {
        this.userOptions = []
      }
    },
    change (e) {
      this.$refs.cascader.getCheckedNodes().map((item) => {
        if (item.level === 3) {
          this.list.push(item.data.userInfo)
        }
      })
      this.removal()
    },
    userListChange (e) {
      this.list.push(this.userOptions[e])
      this.removal()
      this.userValue = ''
    },
    removal () {
      const obj = {}
      this.list = this.list.reduce((cur, next) => {
        obj[next.memberId] ? "" : obj[next.memberId] = true && cur.push(next)
        return cur
      }, [])
    },
    handleDelete (index) {
      this.list.splice(index, 1)
    },
    getUserList () {
      return this.list
    },
    setUserList (e) {
      this.list = e
    }
  }
}
</script>

<style scoped>
.input-box {
  display: flex;
  align-items: center;
}
</style>
